<template>
  <div class="page-content">
    <!-- 表格顶部区域开始 -->
    <!-- 基地导航 -->
    <baseNav/>
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form label-width="100rem">
          <el-row >
            <el-col :span="5">
               <el-date-picker
                    type="date"
                    placeholder="起始日期"
                    clearable
                    v-model="startDate"
                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
            </el-col>
            <el-col :span="5">
                <el-date-picker
                    type="date"
                    placeholder="截至日期"
                    clearable
                    v-model="endDate"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
            </el-col>
            <el-button type="primary" @click="pickDate">搜索</el-button>
          </el-row>
        </el-form>
      </div>
      <div slot="bottom">

    <el-button type="primary" plain size="small" @click="addEven"
            >新增出库</el-button>
                <!-- <el-button type="primary" plain size="small" @click="abc"

            >测试功能按钮</el-button> -->
      </div>
    </table-bar>
    <!-- 表格顶部区域结束 -->

    <!-- 主体表格区域开始 -->
    <TheTable
      :columns="columns"
      :layout="false"
      ref="tableRef"
      :data="allInfo.allList"
      :page.sync="page"
      :showPage="false"
    >
      <el-table-column
      type="index"
      width="50"
      label="序号">
    </el-table-column>
      <el-table-column
        label="鸽棚"
        prop="dovecoteNumber"
        v-if="columns[0].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="类型"
        prop="type"
        v-if="columns[1].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="经手人"
        prop="handler"
        v-if="columns[2].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="数量"
        prop="amount"
        v-if="columns[3].show"
        show-overflow-tooltip
      />
      <el-table-column
       label="金额（总价）"
        prop="total"
        v-if="columns[4].show"
        show-overflow-tooltip
      />
      <el-table-column
       label="备注"
        prop="remark"
        v-if="columns[5].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="出库时间"
        prop="inTime"
        v-if="columns[6].show"
        show-overflow-tooltip
      />
        <el-table-column fixed="right" label="操作" width="200rem">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #32CD32"
            icon="el-icon-share"
            @click="seeDetail(scope.row.id)"
            >详情</el-button
          >
          <el-button type="text" icon="el-icon-edit"  @click="editForm(scope.row.id)">
            编辑
          </el-button>
          <el-button type="text" style="color: #FA6962" icon="el-icon-delete"  @click="tableDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>

    </TheTable>
    <!-- 表格区域结束 -->
        <!-- 页码条区域开始 -->
    <div class="page-css">
      <el-pagination
        :page-sizes="[2, 5, 10, 15]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-if="true"
      >
      </el-pagination>
    </div>
    <!-- 页码条区域结束 -->

    <!-- 添加订单区域开始 -->
    <OutPopup
      :addInfo="addInfo"
      :title="title"
      :dialogVisible="dialogVisible"
      @closeAddDialog="closeAddDialog"
      @closeAddDialogB="closeAddDialogB"
      v-show="dialogVisible"
      @DisplayData="DisplayData"
    />
    <!-- 添加订单区域结束 -->
    <!-- 查看详情开始 -->
    <DetailedPopup
      :detailDialog="detailDialog"
      :detailInfo="detailInfo"
      :title="title"
      @closeDetail="closeDetail"
      v-show="detailDialog"
      @DisplayData="DisplayData"
    />
    <!-- 查看详情结束-->


    <!-- 修改订单弹窗开始 -->
    <el-dialog
      title="修改订单信息"
      :visible.sync="editDialogVisible"
      width="55%"
      :before-close="eidtDialogClosed">

      <el-form
       ref="editFormRef"
      :model="editFormData"
      label-width="5rem"
      :rules="editFormRules"
      >
      <!-- 订单信息 -->
       <el-row>
          <el-col :span="7">
            <el-form-item label="基地ID" prop="dovecoteEntryBillDto.baseId">
              <el-input
                v-model="editFormData.dovecoteEntryBillDto.baseId"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="类型" prop="dovecoteEntryBillDto.type">
              <el-input
                v-model="editFormData.dovecoteEntryBillDto.type"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="鸽棚"
             prop="dovecoteEntryBillDto.dovecoteNumber"
            :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }">
              <el-input
                v-model="editFormData.dovecoteEntryBillDto.dovecoteNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" >
            <el-form-item label="经手人"
             prop="dovecoteEntryBillDto.handler"
            :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }">
              <el-input
                v-model="editFormData.dovecoteEntryBillDto.handler"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="1">
           <el-form-item label="出库时间" label-width="78px"
             prop="dovecoteEntryBillDto.inTime"
            :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }">
              <el-date-picker
              v-model="editFormData.dovecoteEntryBillDto.inTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
           <el-col :span="15">
        <el-form-item label="备注" prop="dovecoteEntryBillDto.remark">
          <el-input
            type="textarea"
            :rows="1"
            v-model="editFormData.dovecoteEntryBillDto.remark"
          ></el-input>
        </el-form-item>
        </el-col>
        </el-row>
      <!-- 订单详细 -->
        <el-divider content-position="center">订单详情</el-divider>
        <el-table
          :data="editFormData.dovecoteEntryBaseDtoList"
          style="width: 100%"
          size="mini"
          class="table"
          :row-style="{height:'20px'}"
          :header-row-style="{height:'20px'}"
          :cell-style="{padding:'0px' }"
          >
         <el-table-column label="名称"
         width="150rem"
         header-align="center"
         >
					<template slot-scope="scope">
            <el-form-item
            label-width="0rem"
              :prop="
              'dovecoteEntryBaseDtoList.' + scope.$index + '.typeName'"
              :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }">
              <el-input v-model="scope.row.typeName"
           ></el-input>
            </el-form-item>
					</template>
				</el-table-column>
        <el-table-column label="数量" width="160rem"
        header-align="center">
					<template slot-scope="scope">
						<el-form-item
            label-width="0rem"
              :prop="
              'dovecoteEntryBaseDtoList.' + scope.$index + '.amount'"
              :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }">
              <el-input v-model="scope.row.amount"
           ></el-input>
            </el-form-item>
					</template>
				</el-table-column>

        <el-table-column label="单价" width="160rem" header-align="center">
					<template slot-scope="scope">
							<el-form-item
            label-width="0rem"
              :prop="
              'dovecoteEntryBaseDtoList.' + scope.$index + '.unitPrice'"
              :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }">
              <el-input v-model="scope.row.unitPrice"
           ></el-input>
            </el-form-item>
					</template>
				</el-table-column>

        <el-table-column label="单位" width="160rem" header-align="center">
					<template slot-scope="scope">
						<el-form-item
            label-width="0rem"
              :prop="
              'dovecoteEntryBaseDtoList.' + scope.$index + '.unit'"
              :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }">
              <el-input v-model="scope.row.unit"
           ></el-input>
            </el-form-item>
					</template>
				</el-table-column>

        <el-table-column label="备注" width="160rem" header-align="center">
					<template slot-scope="scope">
							<el-form-item
            label-width="0rem">
              <el-input v-model="scope.row.remark"
           ></el-input>
            </el-form-item>
					</template>
				</el-table-column>
        </el-table>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">提 交</el-button>
      </div>
    </el-dialog>
    <!-- 修改订单弹窗结束 -->

  </div>
</template>

<script>
import OutPopup from "@/components/Dovecote/StoreManage/OutPopup";
import baseNav from "@/components/Dovecote/StoreManage/baseNav";
import DetailedPopup from "@/components/Dovecote/StoreManage/DetailedPopup";

import {
  getAllInfoByPage,
  deleteOrder,
  showEidtRequest,
  showOrder,
  EidtRequest,
  getByDateInfo,
} from "@/api/Dovecote/StoreManage/MaterialOut.js";

export default {
  name: "DrugOut",
  meta: {
    title: "出库登记",
  },
  components: {
    OutPopup,
    baseNav,
    DetailedPopup,
  },
  data() {
    return {
      // 根据时间查询
      startDate:"",
      endDate:"",
      //表名
      title: "",
      //分类
      searchType: {
        // baseId: "3",
        type: "药品",
      },
      //是否新增打开表单
      dialogVisible: false,
      // 查询到的用户信息对象
      allInfo:{
        // 主体表格数据
        allList: [],
      },
      // 定义页码的一些参数
      page: {
        current: 1,
        pageSize: 5,
        pageNum: 1,
        total: 4,
      },
      theType: {
        type: "药品",
      },
      // 主体表格的表头数据
      columns: [
        { name: "鸽棚", show: true, prop: "dovecoteNumber" },
        { name: "类型", show: true, prop: "type" },
        { name: "经手人", show: true, prop: "handler" },
        { name: "数量", show: true, prop: "amount" },
        { name: "金额（总价）", show: true, prop: "total" },
        { name: "备注", show: true, prop: "remark" },
        { name: "出库时间", show: true, prop:"inTime"},
      ],
      // 添加表单的数据
      addInfo: {
        dovecoteEntryBillDto: {
          baseId: "",
          dovecoteNumber: "A01",
          handler: "",
          remark: "",
          type: "药品",
          inTime:"",
        },
        dovecoteEntryBaseDtoList: [
          {
            amount:"",
            remark:"",
            type:"药品",
            typeName:"",
            unitPrice:"",
            unit:"",
          },
        ],
      },

      // --------编辑、修改用户相关数据--------
      editDialogVisible: false,
      editFormRules:{},
      // 展示编辑表单的数据
      editFormData:{
        dovecoteEntryBillDto:{},
        dovecoteEntryBaseDtoList:[]
      },
      // ------------查看详情数据---------
      // 通过id查询
      sendId:{
        dovecoteEntryBill:""
      },
      // 获取到的详细信息
      detailInfo:{
       detailArray:[]
      },
      //是否打开详情表单
      detailDialog:false,
    };
  },
    created() {
      // 展示数据
      this.setAllList();
      // this.Data();
      // 获取订单详情的数据

   },

  methods: {
    async pickDate(){
      const startTime = this.startDate;
      const endTime = this.endDate;
      const baseId = this.$store.state.Usersetting.BaseInfo.id;
      console.log(startTime,endTime,baseId);
      const { data: res } = await getByDateInfo(startTime,endTime,baseId)
        if (res.statusCode !== 20000) {
          this.$message.error("查询数据失败");
        } else {
          this.allInfo.allList = res.data;
        this.$message.success("查询用户成功");
        }
    },

    // 编辑表单开始
    // 根据id展示编辑用户的对话框
    async editForm(id){
      this.editDialogVisible = true;
      console.log(id)
      const { data: res } = await showOrder(id);
      if(res.statusCode !== 20000){
          this.$message.error("查询数据失败");
      }
      // 请求订单信息
      this.editFormData.dovecoteEntryBillDto=res.data;
      console.log("编辑订单信息的展示：", this.editFormData.dovecoteEntryBillDto);
      // 请求订单详细信息
      this.sendId.dovecoteEntryBill=id;
      const myJSON = JSON.stringify(this.sendId);
      const { data: resData } = await showEidtRequest (myJSON);
       if (res.statusCode === 20000){
          // this.$message.success("查询详情成功");
          this.editFormData.dovecoteEntryBaseDtoList = resData.data;
          console.log("赋值后的详细信息：" ,this.editFormData.dovecoteEntryBaseDtoList)
       }else{
          if(res.statusCode !== 20000){
            return  this.$message.error("查询数据失败");
           }
       }
    },
    // 按下提交按钮，修改数据
    editUserInfo(){
      this.editDialogVisible = false
      const id = this.editFormData.dovecoteEntryBillDto.id;
      this.$refs.editFormRef.validate(async valid=>{
        if(!valid) return
        // 发起修改用户信息的数据请求
        const{data:res} = await EidtRequest(id,this.editFormData)
        if(res.statusCode !== 20000) {
          return this.$message.error("修改用户失败");
        }
        console.log("修改后的数据",res)
        // 关闭对话框
        this.editDialogVisible = false;
        // 刷新数据列表
        this.setAllList()
        // 提示修改成功
        this.$message.success("更新订单成功");
      })
    },

      //根据id查看订单详情
    async seeDetail(id) {
         console.log(id)
         this.sendId.dovecoteEntryBill=id;
         const myJSON = JSON.stringify(this.sendId);
      const { data: res } = await showEidtRequest (myJSON);
      console.log("详细信息：", res);
       if (res.statusCode === 20000){
          this.$message.success("查询详情成功");
          this.detailDialog = true;
          // 查看订单详细
          this.detailInfo.deytailArra = res.data;
       }else{
          if(res.statusCode !== 20000){
            return  this.$message.error("查询数据失败");
           }
       }
    },

    // 修改表单的重置操作
    // 表单“×” 关闭表单功能实现
    eidtDialogClosed() {
          this.editDialogVisible = false
        this.$refs.editFormRef.resetFields()
    },

    // 编辑表单开始结束
    changeColumn(columns) {
        this.columns = columns
        this.$refs.table.doLayout()
    },

  //  获取主体表格数据
    async setAllList() {
      const { data: res } = await getAllInfoByPage(
        this.page.pageNum,
        this.page.pageSize,
        this.searchType.type,
        this.$store.state.Usersetting.BaseInfo.id
      );
      console.log("请求到的列表", res);
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else {
        this.allInfo.allList = res.data.records;
        this.page.total = res.data.total;
      }
    },

    //打开新增表单
    addEven() {
      this.dialogVisible = true;
      this.title = "新增订单";
      this.addInfo ={
        dovecoteEntryBillDto: {
          baseId: "",
          handler: "",
          remark: "",
          type: "药品",
          inTime:"",
        },
        dovecoteEntryBaseDtoList: [
          {
            amount:"",
            remark:"",
            supplierId:"",
            type:"药品",
            typeName:"",
            unitPrice:"",
            unit:"",
          },
        ],
      };
      this.addInfo.dovecoteEntryBillDto.baseId = this.$store.state.Usersetting.BaseInfo.id;

    },
    //关闭新增表单
    closeAddDialog(a) {
      //是否打开详情表单
      this.detailDialog = a;
      //是否新增打开表单
      this.dialogVisible = a;
      this.addInfo = {};
      this.setAllList();
    },
    closeAddDialogB(a){
      //是否新增打开表单
      this.dialogVisible = a;
      this.addInfo = {};
    },
    // 关闭详情表单
    closeDetail(a) {
      //是否打开详情表单
      this.detailDialog = a;
    },
    DisplayData() {
      this.setAllList();
    },
    // 根据id删除订单
    async tableDelete(id) {
      console.log(id)
      const confirmResult = await this.$confirm(
        "此操作将永久删除该订单, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteOrder(id);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除该订单");
        this.setAllList();
      } else {
        this.$message.error("删除该订单失败");
      }
    },
    // 改变页码
    handleCurrentChange(newSize){
      console.log(newSize)
      this.page.pageNum = newSize;
      // 重新获取数据
      this.setAllList()

    },
    handleSizeChange(newPage){
      console.log(newPage)
      this.page.pageSize = newPage
      this.setAllList()
    },
  },
};
</script>

<style lang="scss" scoped>

.search {
  background-color: #fafafa;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  padding: 0.6rem;
  margin-bottom: 0.6rem;
}
.page-css{
   margin-top: 1.1rem;
  text-align: center;
}

</style>
